import { ITouchEvent, View } from "@tarojs/components";
import { ReactNode } from "react";
import ByIcon from "./ByIcon";
import { suffixUnit } from "@/utils";

type BySquareProps = {
  size?: number | string;
  circle?: boolean;
  bgColor?: string;
  icon?: string;
  iconSize?: string | number;
  iconColor?: string;
  className?: string;
  children?: ReactNode;
};
type BySquareEvent = {
  onClick?: (event: ITouchEvent) => void;
};

export default ({
  className,
  circle = true,
  size,

  icon,
  iconSize,
  iconColor,

  children,
  onClick,
}: BySquareProps & BySquareEvent) => {
  return (
    <View
      className={`flex-none flex-center ${
        circle ? "rounded-full" : "rounded-lg"
      } ${className}`}
      style={`width:${suffixUnit(size)};height:${suffixUnit(size)}`}
      onClick={onClick}
    >
      {children ||
        (icon && <ByIcon name={icon} size={iconSize} color={iconColor} />)}
    </View>
  );
};
